<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爬虫源列表</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
   {% include 'navbar.html' %}

    <div class="container mt-5">
        <h1 class="mb-4">爬虫源列表</h1>
        <a href="/source/create" class="btn btn-success mb-3">创建爬虫源</a>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>源站名称</th>
                        <th>爬取规则</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for source in sources %}
                    <tr>
                        <td>{{ source.id }}</td>
                        <td>{{ source.source_name }}</td>
                        <td>
                            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#viewRulesModal" data-source-id="{{ source.id }}">查看规则</button>
                        </td>
                        <td>
                            {% if source.source_status == 1 %}开启
                            {% else %}关闭
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('edit_source', source_id=source.id) }}" class="btn btn-warning btn-sm">编辑</a>
                            <form action="{{ url_for('delete_source', source_id=source.id) }}" method="post" style="display:inline;">
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确认删除爬虫源吗？')">删除</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="viewRulesModal" tabindex="-1" role="dialog" aria-labelledby="viewRulesModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewRulesModalLabel">爬取规则</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>书籍列表 URL:</h6>
                    <p id="bookListUrl">加载中...</p>
                    <h6>书籍 ID 匹配:</h6>
                    <p id="bookIdPattern">加载中...</p>
                    <h6>页面匹配:</h6>
                    <p id="pagePattern">加载中...</p>
                    <h6>书籍详情 URL:</h6>
                    <p id="bookDetailUrl">加载中...</p>
                    <h6>书籍名称匹配:</h6>
                    <p id="bookNamePattern">加载中...</p>
                    <h6>作者名称匹配:</h6>
                    <p id="authorNamePattern">加载中...</p>
                    <h6>图片 URL 匹配:</h6>
                    <p id="picUrlPattern">加载中...</p>
                    <h6>描述开始:</h6>
                    <p id="descStart">加载中...</p>
                    <h6>描述结束:</h6>
                    <p id="descEnd">加载中...</p>
                    <h6>书籍目录 URL:</h6>
                    <p id="bookIndexUrl">加载中...</p>
                    <h6>目录 ID 匹配:</h6>
                    <p id="indexIdPattern">加载中...</p>
                    <h6>目录名称匹配:</h6>
                    <p id="indexNamePattern">加载中...</p>
                    <h6>书籍内容 URL:</h6>
                    <p id="bookContentUrl">加载中...</p>
                    <h6>内容开始:</h6>
                    <p id="contentStart">加载中...</p>
                    <h6>内容结束:</h6>
                    <p id="contentEnd">加载中...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $('#viewRulesModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var sourceId = button.data('source-id'); // Extract info from data-* attributes

            // Make an AJAX request to fetch the rules
            $.ajax({
                url: '/source/' + sourceId + '/rules',
                method: 'GET',
                success: function(response) {
                    $('#bookListUrl').text(response.bookListUrl || '无数据');
                    $('#bookIdPattern').text(response.bookIdPattern || '无数据');
                    $('#pagePattern').text(response.pagePattern || '无数据');
                    $('#bookDetailUrl').text(response.bookDetailUrl || '无数据');
                    $('#bookNamePattern').text(response.bookNamePattern || '无数据');
                    $('#authorNamePattern').text(response.authorNamePattern || '无数据');
                    $('#picUrlPattern').text(response.picUrlPattern || '无数据');
                    $('#descStart').text(response.descStart || '无数据');
                    $('#descEnd').text(response.descEnd || '无数据');
                    $('#bookIndexUrl').text(response.bookIndexUrl || '无数据');
                    $('#indexIdPattern').text(response.indexIdPattern || '无数据');
                    $('#indexNamePattern').text(response.indexNamePattern || '无数据');
                    $('#bookContentUrl').text(response.bookContentUrl || '无数据');
                    $('#contentStart').text(response.contentStart || '无数据');
                    $('#contentEnd').text(response.contentEnd || '无数据');
                },
                error: function() {
                    $('#bookListUrl').text('无法加载数据');
                }
            });
        });
    </script>
</body>
</html>
